<template>
	<div style="margin-top: 10px">
		<el-container>
			<el-header>
				<div>
				</div>
				<div>
					<el-button type="primary" icon="el-icon-plus" @click="showAddDeptView">
						添加院系
					</el-button>
					<el-dialog
				      title="添加院系"
				      :visible.sync="diaDeptVisible"
					  @close="clear">
					  <div>
				      <el-form :model={deptForm} :rules="rules" style="text-align: left" ref="usersForm">
						<el-form-item label="院系号" prop="deptNo">
						          <el-input size="mini" style="width: 150px" 
						  prefix-icon="el-icon-edit"   placeholder="请输入院系号"
						  v-model="deptForm.deptNo" autocomplete="off"></el-input>
						        </el-form-item>
				        <el-form-item label="院系名称" prop="deptName">
				          <el-input size="mini" style="width: 150px" 
						  prefix-icon="el-icon-edit" 
						   placeholder="请输入用户名"
						  v-model="deptForm.deptName" autocomplete="off"></el-input>
				        </el-form-item>
				      </el-form>
					  </div>
					   <span slot="footer" class="dialog-footer">
					      <el-button @click="diaDeptVisible = false">取 消</el-button>
					      <el-button type="primary" @click="AddDeptView('deptForm')">确 定</el-button>
					   </span>
				</el-dialog>
				</div>
			</el-header>
			<el-main>
				
				<el-table 
					:data="dept"
	                stripe
					fit
	                overflow=auto
	                v-loading="loading"
	                element-loading-text="正在加载..."
	                element-loading-spinner="el-icon-loading"
	                element-loading-background="rgba(0, 0, 0, 0.8)"
	                style="width: 100%"
					height="380">
					<el-table-column type="selection" fixed="left"></el-table-column>
					<el-table-column prop="deptNo" label="院系号" align="center" fixed="left"></el-table-column>
					<el-table-column prop="deptName" label="院系名称" align="center" fixed="left"></el-table-column>
					<el-table-column label="操作" align="center" fixed="left">
						<template slot-scope="scope">
							<el-button style="padding: 7px" size="mini" 
							icon="el-icon-edit" @click="showEditDeptView(scope.row)"></el-button>
							<el-button style="padding: 7px" size="mini" 
							type="danger" icon="el-icon-delete" @click="deleteDept(scope.row)"></el-button>
						</template>
					</el-table-column>
				</el-table>				
				<div>
					<el-dialog
				      title="修改院系信息"
				      :visible.sync="dialogVisible">
					  <div>
				      <el-form :model={deptForm} :rules="rules" style="text-align: left" ref="usersForm">
						<el-form-item prop="deptNo" style="height: 0">
						          <el-input type="hidden" v-model="deptForm.deptNo" autocomplete="off"></el-input>
						        </el-form-item>
				        <el-form-item label="院系名称" prop="deptName">
				          <el-input size="mini" style="width: 150px" 
						  prefix-icon="el-icon-edit" 
						   placeholder="请输入用户名"
						  v-model="deptForm.deptName" autocomplete="off"></el-input>
				        </el-form-item>
				      </el-form>
					  </div>
					   <span slot="footer" class="dialog-footer">
					      <el-button @click="dialogVisible = false">取 消</el-button>
					      <el-button type="primary" @click="EditDeptView('deptForm')">确 定</el-button>
					   </span>
				</el-dialog>
				</div>				
			</el-main>
			<el-footer>
				<div>
					<el-pagination
					  background
					  @current-change="currentChange"
					  @size-change="sizeChange"
					  layout="prev, pager, next, jumper, ->, total, slot"
					  :total="total">
					</el-pagination>
				</div>								
			</el-footer>
		</el-container>
	</div>
	
</template>
<script>
	export default{
		data() {
		    return {
		       dept: [],
			   majorInfos: [],
			   loading: false,
			   total: 0,
			   page:1,
			   size:10,
			   title:'',
			   diaDeptVisible:false,
			   dialogVisible: false,
			   deptForm: {
				   deptNo: '',
				   deptName: '',
				  },
			    rules: {
					deptName: [{
							  required: true,
							  message: '院系名称不能为空',
							  trigger: blur
							},
							{min:1,max:15,message:'长度在1到15个字符之间'}
							],
						}
		    }
		},
		mounted: function(){
			this.loadDepts();
		},
		methods: {
			clear () {
			     this.deptForm = {
			        deptNo:'',
					deptName:'',
			      }
			    },
			showEditDeptView(resp){
				this.dialogVisible = true;
				this.deptForm = {
				  deptNo:resp.deptNo,
				  deptName:resp.deptName,
				};
			},
			updateDept(){
				this.postRequest('/dept/basic/updateDept',{
				  deptNo:this.deptForm.deptNo,
				  deptName:this.deptForm.deptName,
				}).then(resp =>{
				  if(resp){
						this.$notify.info({
						  title: '消息',
						  message: resp.info
						});
						}
						this.dialogVisible = false;
						this.loadDepts();
					})
			},
			EditDeptView(data){
				this.updateDept();
				this.title = '修改院系信息';
				this.deptForm = data;
			},
			deleteDept(data){
				this.$confirm('此操作将永久删除【' + data.deptName + '】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/dept/basic/" + data.deptNo).then(resp => {
						if (resp) {
							this.$notify.info({
							  title: '消息',
							  message: resp.info
							});
							this.loadDepts();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			AddDeptView(data){
				this.addDept();
				this.title = '添加院系';
				this.deptForm = data;
			},
			showAddDeptView(){
				this.diaDeptVisible = true;
			},
			addDept(){
				this.postRequest('/dept/basic/addDept',{
				  deptNo:this.deptForm.deptNo,
				  deptName:this.deptForm.deptName,
				}).then(resp =>{
							  if(resp){
									this.$notify.info({
									  title: '消息',
									  message: resp.info
									});
									}
									this.diaDeptVisible = false;
									this.loadDepts();
								})
			},
			sizeChange(currentSize) {
				this.size = currentSize;
				this.loadDepts();
					},
			 currentChange(currentPage) {
				this.page = currentPage;
				this.loadDepts();
					},
			loadMajors(){
				this.loading = true;
				let url = '/major/basic/?page=' + this.page +'&pageSize='+this.size;
				this.getRequest(url).then(resp =>{
					   this.loading = false;
					   if(resp){
						   this.majorInfos = resp.majorInfos;
						   this.total = resp.count;
					   }
				})
			},
		    loadDepts(){
			   this.loading = true;
			   let url = '/dept/basic/?page=' + this.page +'&pageSize='+this.size;
			   this.getRequest(url).then(resp =>{
				   this.loading = false;
				   if(resp){
					   this.dept = resp.dept;
					   this.total = resp.count;
				   }
			   })
		   }
		}
	}
</script>

<style>
	.el-main {
	    color:  #E9EEF3;
	    line-height: 20px !important;
	}
	.el-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 15px;
		box-sizing: border-box;
	}
	.el-footer {
	    position:fixed;
		bottom:10px;
		left: 0;
		right: 0;
		line-height:60px;
	  }
	.el-pagination {
		display: flex;
		justify-content: flex-end;
		text-align: center;
	}
</style>
